<template>
  <div class="cell_group">
    <div class="cell">
      <div class="title">
        {{config.attrName}}
      </div>
      <div class="picker" :style="!noWrong?'color: red':''" @click="popupShow=true">
        {{date}}
        <img src="@/assets/img/right.png" alt="">
      </div>
      <van-popup v-model="popupShow" position="bottom">
        <!-- <van-picker :columns="config.attrValueList" :default-index="0" @change="onChange" /> -->
        <van-datetime-picker v-model="currentDate"  :max-date="maxDate" @cancel="Cancel" @confirm="Confirm" @change="Change" type="date" />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: "time_picker",
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number,
    noWrong:{
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      popupShow: false,
      currentDate: new Date(),
      currentdate: "",
      date: "",
      maxDate:new Date(),
    };
  },
  watch: {
    config(n) {
      if (n.value) {
        if (n.value.indexOf("-") == -1) {
          n.value =
            n.value.slice(0, 4) +
            "-" +
            n.value.slice(4, 6) +
            "-" +
            n.value.slice(6);
        }
        this.date = n.value;
      }
    }
  },
  created() {
    console.log(this.noWrong)
    if (this.config.value) {
      if (this.config.value.indexOf("-") == -1) {
        this.config.value =
          this.config.value.slice(0, 4) +
          "-" +
          this.config.value.slice(4, 6) +
          "-" +
          this.config.value.slice(6);
      }
      this.date = this.config.value;
    }
  },
  methods: {
    Change() {
      // console.log(this.currentDate);
      var date = this.currentDate;
      var seperator1 = "-";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + strDate;
    },
    Confirm(e) {
      if(!this.currentdate){
        this.Change()
      }
      if(this.currentdate){
        this.date = this.currentdate;
        this.config.value = this.currentdate;
        this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);
        this.popupShow = false;
      }
    },
    Cancel() {
      this.popupShow = false;
    }
  }
};
</script>
<style lang="less">
.picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.4rem;
  font-family: PingFangSC-Regular;
  color: #666666;
  width: 60%;
  height: 100%;
  img {
    width: 0.186667rem;
    height: 0.346667rem;
    padding-left: 0.213333rem;
  }
}
</style>

